<script setup lang="ts">
import { ref } from 'vue';
import '@mdi/font/css/materialdesignicons.css'
import { useListStore } from '../stores/list'
import { useInputMsgStore } from '../stores/input_msg'
import { useStatusStore } from '../stores/status';
const lists = useListStore()
const input_msg = useInputMsgStore()
const width = ref(0)
const status = useStatusStore()

function initList(){
lists.changeCurrentList(status.getLlmId())

}
function getWindowWidth() {
    width.value = window.innerWidth - window.innerHeight
    console.log('width list:', width.value);
}

function double_click(val: number = 0) {
    console.log('double click,', val)
    let msg = lists.currentList.msgs[val].orign_msg
    console.log('msg:', msg)
    input_msg.change_current_msg(msg)
}
// handle visibilityState
// when the page is loaded, check if it's visible
// if visible, scroll to the bottom
function handleVisibilityChange() {
    if (document.visibilityState === 'visible') {
        // The page is visible
        console.log('Page is visible');
        // Scroll to the bottom of the list
        const list = document.querySelector('.message_list');
        if (list) {
            list.scrollTop = list.scrollHeight;
        }
    } else if (document.visibilityState === 'hidden') {
        // The page is hidden
        console.log('Page is hidden');
        // Optionally, you can stop any ongoing tasks or save the state here
    } else {
        // The page is not visible
        console.log('Page is not visible');
    }
}
// Add event listener for visibility change
document.addEventListener('visibilitychange', handleVisibilityChange);

getWindowWidth()
initList()
</script>

<template>
    <v-list class="message_list" min-height="300px">

        <v-list-item v-for="(item, i) in lists.currentList.msgs" :key="i" :value="item" color="primary" rounded="shaped"
            :max-height="10000">
            <template v-if="item.id == 'bot'" v-slot:prepend>
                <v-icon icon='mdi-chevron-right-box-outline'></v-icon>
            </template>
            <!-- <div v-if="item.id == 'user'" v-html="item.content"  @dblclick="double_click(i)"></div> -->
            <div  v-html="item.content" @dblclick="double_click(i)"></div>
            <template v-if="item.id == 'user'" v-slot:append class="user-msg">
                <v-icon icon='mdi-chevron-left-box-outline'></v-icon>
            </template>
        </v-list-item>
    </v-list>
    
</template>

<style scoped>


.user-msg {
    padding-left: 100px;
}

div {
    word-wrap: break-word;
}
</style>
